<template>
  <div class="app-container">
    <div class="filter-container">
      <stat-condition ref="condition" :stat-type="statType" @initChart="initChart"/>
    </div>
  </div>
</template>

<script>
import waves from '@/directive/waves'
import StatCondition from './components/StatCondition'

export default {
  name: 'StatPercent',
  directives: { waves },
  components: { StatCondition },
  data() {
    return {
      statType: 'statPercent'
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    initChart(myChart, resultData) {
      const xAxis_data = []
      const data_95 = []
      const data_99 = []
      const data_995 = []
      for (let i = 0; i < resultData.length; i++) {
        const dateStat = resultData[i]
        xAxis_data[i] = dateStat.name
        const subStatMap = dateStat.subStatMap
        data_95.push(subStatMap['95'].count)
        data_99.push(subStatMap['99'].count)
        data_995.push(subStatMap['99.5'].count)
      }
      const option = {
        title: {
          text: this.$refs.condition.statCondition.platformName + '-鹰眼调用统计报表',
          subtext: '百分位统计'
        },
        // color: ['#6ea376','#c93436','#c2c21a'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          formatter: function(obj) {
            let html = obj[0].axisValue + '<br>'
            html += obj[0].marker + obj[0].seriesName + ':' + obj[0].value + 'ms' + '<br>'
            html += obj[1].marker + obj[1].seriesName + ':' + obj[1].value + 'ms' + '<br>'
            html += obj[2].marker + obj[2].seriesName + ':' + obj[2].value + 'ms'

            return html
          }
        },
        legend: {
          data: ['95th', '99th', '99.5th']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis_data
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '请求耗时',
            axisLabel: {
              formatter: '{value} ms'
            }
          }
        ],
        series: [
          {
            name: '95th',
            type: 'line',
            data: data_95,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}ms'
              }
            }
          },
          {
            name: '99th',
            type: 'line',
            data: data_99,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}ms'
              }
            }
          },
          {
            name: '99.5th',
            type: 'line',
            data: data_995,
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                formatter: '{c}ms'
              }
            }
          }
        ]
      }
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>
<style>
</style>

